<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: lxc
 * @Date: 2020-12-18 17:05:28
 * @LastEditors: lxc
 * @LastEditTime: 2021-01-04 11:41:40
-->
<template>
    <div>
        <a-form layout="inline"
                :model="form"
                v-bind="formItemLayout">
            <a-form-item label="开销项">
                <a-input v-model:value="form.expendName"
                         style="width:150px"
                         placeholder="开销名称模糊搜索" />
            </a-form-item>
            <a-form-item label="分类">
                <a-select v-model:value="form.classifyId"
                          style="width:100px"
                          placeholder="选择分类">
                    <a-select-option v-for="(item,index) in classifyList"
                                     :key="index"
                                     :value="item._id">{{item.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="时间区间">
                <a-range-picker v-model:value="date"
                                :placeholder="['开始时间','结束时间']"
                                valueFormat='YYYY-MM-DD'
                                style="width:220px"
                                @change="onChange" />
            </a-form-item>
            <a-form-item label="金额区间">
                <a-input v-model:value="form.expendMoneyStart"
                         style="width:100px"
                         placeholder="起始金额" />
                至
                <a-input v-model:value="form.expendMoneyEnd"
                         style="width:100px"
                         placeholder="结束金额" />
            </a-form-item>
            <a-button @click="search()">搜索</a-button>
            <a-button>置空</a-button>
            <a-button @click="addExpend()">添加开销</a-button>

        </a-form>
        <!-- <p @click="editClassify()">添加分类</p> -->
        <table border='1'>
            <tr>
                <th>开销项</th>
                <th>消费时间</th>
                <th width="130">分类</th>
                <th width="130">金额</th>
                <th width="150">操作</th>
            </tr>
            <tr v-for="(item,index) in dataList"
                :key="index">
                <td>{{item.expendName}}</td>
                <td>{{item.date.substring(0,10)}}</td>
                <td>{{item.classifyName}}</td>
                <td>{{item.expendMoney}}元</td>
                <td>
                    <a-button type="link"
                              @click="deleteOrder(item)">删除</a-button>
                    <a-button type="link"
                              @click="addExpend(item)">编辑</a-button>
                </td>
            </tr>
        </table>
        <a-pagination :page-size.sync="form.pageSize"
                      v-model="form.pageIndex"
                      @change="changeIndex"
                      :total="total"
                      show-less-items />
        <a-modal title="Title"
                 v-model:visible="showEdit"
                 @ok="handleOk">
            <a-form :model="ordersObj"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                <a-form-item label="开销项">
                    <a-input size="large"
                             v-model:value="ordersObj.expendName" />
                </a-form-item>
                <a-form-item label="分类">
                    <a-select v-model:value="ordersObj.classifyId"
                              style="width:100px"
                              placeholder="选择分类">
                        <a-select-option v-for="(item,index) in classifyList"
                                         :key="index"
                                         :value="item._id">{{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="金额">
                    <a-input-number size="large"
                                    :min="0"
                                    :max="10000"
                                    v-model:value="ordersObj.expendMoney" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script lang="javascript">
import {
    getClassifyList,
    addOrders,
    getOrderList,
    eidtOrder,
    delOrder
} from "../../api/index.ts";
import {
    reactive,
    toRefs,
    watch,
    computed,
    ref,
    onMounted,
    watchEffect
} from "vue";
import { message } from "ant-design-vue";
export default {
    components: {},
    setup() {
        const state = reactive({
            dataList: [],
            classifyList: [],
            showEdit: false,
            date: [],
            total: 0
        });
        const form = reactive({
            expendName: "",
            expendMoneyStart: null,
            expendMoneyEnd: null,
            classifyId: null,
            date: "",
            pageIndex: 1,
            pageSize: 5
        });
        const ordersObj = reactive({
            classifyId: null,
            expendName: "",
            expendMoney: 0,
            id: 0,
            classifyName: ''
        });
        const methods = {
            // 搜索
            search() {
                if (Number(form.expendMoneyEnd) < Number(form.expendMoneyStart)) {
                    message.error("起始金额不得高于结束金额");
                    return;
                }
                form.date = state.date.join("@");
                methods.getOrdersList();
                console.log(form);
            },
            // 确认编辑添加
            async handleOk() {
                let res
                if (ordersObj.classifyId) {
                    res = await eidtOrder(ordersObj);
                } else {
                    res = await addOrders(ordersObj);
                }
                message.success(res.msg);
                methods.getOrdersList();
                state.showEdit = false;
            },
            // 获取订单列表
            async getOrdersList() {
                let res = await getOrderList(form);
                state.dataList = res.dataList;
                state.total = res.total;
            },
            // 点击编辑添加
            addExpend(item) {
                if (item) {
                    ordersObj.expendName = item.expendName;
                    ordersObj.expendMoney = item.expendMoney;
                    ordersObj.classifyId = item.classifyId;
                    ordersObj.id = item._id;
                    ordersObj.classifyName = item.classifyName;
                } else {
                    ordersObj.id = 0;
                    ordersObj.expendName = "";
                    ordersObj.expendMoney = 0;
                    ordersObj.classifyName = '';
                    ordersObj.classifyId = null;
                }
                state.showEdit = true;
            },
            // 删除
            async deleteOrder(item) {
                let id = item._id;
                let res = await delOrder({ id });
                message.success(res.msg);
                methods.getOrdersList();
            },
            // 换页
            changeIndex(val) {
                form.pageIndex = val;
                methods.getOrdersList();
            }
        };
        onMounted(() => {
            methods.getOrdersList();
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let nowTime = `${year}-${month}-${day}`
            let monthStrat = `${year}-${month}-1`

            console.log(nowTime);
            // 获取分类列表
            getClassifyList().then(res => {
                let obj = {
                    name: "全部",
                    _id: null
                };
                res.unshift(obj);
                state.classifyList = res;
            });
        });
        return {
            ...toRefs(state),
            ...toRefs(methods),
            ordersObj,
            form
        };
    }
};
</script>
<style scoped>
table {
  width: 90%;
  margin: 20px auto;
  border: 1px solid #555;
}
table > tr > td,
th {
  text-align: center;
}
</style>
